<template>
  <div>
    <div :id="jsonId" class="json-editor-content">

    </div>
    <div class="submit-button" @click="submit">提交</div>
  </div>
</template>
<script>
import JSONEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.min.css'
export default {
  name: 'jsonEditor',
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    content: {
      default: ''
    },
    jsonId: {
      type: String,
      default: 'jsonEl'
    }
  },
  data() {
    return {}
  },
  methods: {
    // 上级使用组件的时候添加ref="jsonEditor"属性，let content = this.$refs.jsonEditor.getJson(), 提交按钮按需求去除。
    getJson() {
      return this.editor.get()
    },
    submit() {
      const editorJson = this.editor.get()
      console.log(editorJson)
      this.$emit('change', editorJson)
    }
  },
  mounted() {
    this.$nextTick(() => {
      const container = this.$el.querySelector('#' + this.jsonId)
      var options = {
        mode: 'code'
      }
      this.editor = new JSONEditor(container, options)
      this.editor.set(this.content)
    })
  },
  watch: {
    content (value) {
      this.editor && this.editor.set(value)
    }
  }
}
</script>
<style scoped>
.json-editor-content {
  width: 100%;
  height: 500px;
}

.submit-button {
  width: 120px;
  margin: 10px 0;
  text-align: center;
  border-radius: 4px;
  background:lightcoral;
  color: #fff;
  line-height: 36px;
  height: 36px;
}

>>> .jsoneditor-poweredBy {
  display: none
}
>>> .jsoneditor-sort {
  display: none;
}
>>> .jsoneditor-repair {
  display: none;
}
>>> .jsoneditor-transform {
  display: none;
}
</style>